<template>
	<view class="member-card">
		<view class="swiper">
			<view class="swiper-wrapper" :style="{ transform: `translate3d(-${currentIndex * 682}rpx, 0, 0)` }"
				@touchstart="handleTouchStart" @touchend="handleTouchEnd">
				<view class="card-container swiper-slide" v-for="(item, index) in memberLevelInfo" @click="downdrop"
					:class="'member' + item.memberLevel" :key="index" :style="{
            width: '654rpx',
            margin: '0 32rpx 32rpx 0',
            backgroundImage: `url(${item.bgc})`,
            background: 'no-repeat cover',
          }">
					<view class="card_inner_box">
						<view class="leval-t">
							<view class="level">
								<view class="grade">
									<text class="number" :style="{color: item.gradeColor}">
										<text class="member_level">V{{item.memberLevel}}</text>
										<text class="NotoSansSC_Medium">{{item.memberLevelName}}</text>
									</text>
								</view>
								<!-- 下拉 -->
								<view class="drop-down" @click.stop="downdrop">
									<view class="drop-down-box" :class="index == 0 ? 'drop_text1' : 'drop_text2'">
										尊享&nbsp;{{ item.memberLevel + 1 }}&nbsp;项专属特权
                    <img class="down_drop_arrow" :class="isDropDownOpen ? 'arrow_rotate' : ''"
                    	:src="index !== 0 ? downDropArrow1 : downDropArrow2" />
									</view>
								</view>

								<block v-if="shouldRender">
									<!-- 展示框 -->
									<view class="drop-down-bordedr"
										:class="isDropDownOpen ? 'animate-drop-down' : 'animate-drop-up'"
										@click="downdrop">
									</view>

									<view class="drop-down-main" @click.native.stop="goInfo">
										<view class="downdrop_box"
											:class="isDropDownOpen ? 'animate-drop-down' : 'animate-drop-up'">
											<view class="item">
												<img
													src="https://100000063-1252208446.file.myqcloud.com/images/Image1.png" />
												<text class="NotoSansSC">专享产品</text>
											</view>
											<view class="item">
												<img
													src="https://100000063-1252208446.file.myqcloud.com/images/Image (6).png" />
												<text class="NotoSansSC">专属顾问</text>
											</view>
											<view class="item">
												<img :src="item.icon3" />
												<text class="NotoSansSC"
													:style="index==0?'color:rgba(0, 0, 0, 0.22)':''">品牌特邀</text>
											</view>
											<view class="item">
												<img :src="item.icon4" />
												<text class="NotoSansSC"
													:style="index==0||index==1?'color:rgba(0, 0, 0, 0.22)':''">生日惊喜</text>
											</view>
										</view>
									</view>
								</block>
							</view>
						</view>
						<view class="leval-b">
							<view class="exp" @click.stop="handleShowExp">
								<view class="exp_left">
									<text class="curr_exp" :style="{ color: item.expText1}">
										{{ vipPoint.exp_12M == null ? 0 : `${vipPoint.exp_12M} ` }}
									</text>
									<text v-if="vipPoint.exp_12M >= item.startPoint && vipPoint.exp_12M != null"
										class="curr_exp" :style="{ color: item.expText1}">
										经验值
									</text>
									<text v-else class="tag_exp" :style="{ color: item.expText2}">
										{{ `/ ${item.startPoint} 经验值` }}
									</text>
									<img class="exp_icon" :src="item.memberLevel === 1 ? expIconBlack :expIconWhite" :style="{opacity:level == item.memberLevel?0.9:0.8}" />
								</view>

								<text  class="NotoSansSC_Regular"
									:style="{ color: item.expText2}">
									{{level> item.memberLevel  ? '已达成': level==item.memberLevel ? '当前等级' : '未达成'}}
								</text>

								<!-- <text v-if="item.memberLevel === 2" class="NotoSansSC_Regular" :style="{ color: item.expText2}">
									{{ vipPoint.exp_12M  >=  item.endPoint? '已达成' : vipPoint.exp_12M >= item.startPoint ?   `当前等级`:'未达成' }}
								</text>
								<text v-if="item.memberLevel === 1" class="NotoSansSC_Regular"
									:style="{ color: item.expText2}">
									{{ (vipPoint.exp_12M >= item.endPoint )? '已达成' : `当前等级`}}
								</text> -->

							</view>
							<view class="progress">
								<view class="progress-bar"
									:style="{ width: `${item.percen}%`, background: item.color }"></view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			memberLevelInfo: {
				type: Array,
				default: () => [],
			},
			memberTotalAmount: {
				type: Number,
			},
			memberDetails: {
				type: Object,
			},
		},
		data() {
			return {
				currentIndex: 0,
				startTouchX: 0,
				endTouchX: 0,
				isDropDownOpen: false,
				Name: null,
				//   vipPoint:{'exp_12M' : 15001,'lavelName' :30},
				vipPoint: null,
				shouldRender: false,
				downDropArrow1: 'https://100000063-1252208446.file.myqcloud.com/images/macallan-remvp/info/Icon2.png',
				downDropArrow2: 'https://100000063-1252208446.file.myqcloud.com/images/macallan-remvp/info/Icon1.png',
				expIconWhite: "",
				expIconBlack: "",
				level: 1,
			};
		},
		mounted() {

			const {
				expIconSvgImg
			} = require("./imgs.svg.js");
			this.expIconWhite = expIconSvgImg("#fff");
			this.expIconBlack = expIconSvgImg("#000");
		},
		methods: {
			// 	getBarStyle(nextLevelPoint, color) {
			//   let width;
			//   if (this.vipPoint.exp_12M > nextLevelPoint) {
			//     width = '100%';
			//   } else {
			//     width = `${this.vipPoint.exp_12M / nextLevelPoint * 100}%`;
			//   }
			//   return {
			//     'width': width,
			//     'height': '4rpx',
			//     'background': color
			//   };
			// },

			goInfo() {
				uni.navigateTo({
					url: "/pages/customer/memberRules?tab=1"
				});
			},

			goaddminInfo() {
				uni.navigateTo({
					url: "/pages/customer/memberGrowth",
				});
			},
			getparent(value) {
				const {
					exp_12M,
					lavelName
				} = value;
				// 在数组中查找与memberLevetrue.lavername相等的memberLevelName的index
				const index = this.memberLevelInfo.findIndex((item) => item.memberLevelName === lavelName);
				this.level = index+1

				// 如果匹配的索引存在，则设置currentIndex为该索引
				if (index !== -1) {
					this.currentIndex = index;
				}
				if (exp_12M > 0) {
					this.vipPoint = value;
				}
			},

			getvipPoint(value) {},
			// 下拉展示
			downdrop(event) {
				event.stopPropagation();
				this.isDropDownOpen = !this.isDropDownOpen;

				this.$emit("dropdown-status-changed", this.isDropDownOpen);
				if (this.shouldRender) {
					if (timerId) {
						clearTimeout(timerId);
					}
					const timerId = setTimeout(() => {
						this.shouldRender = !this.shouldRender;
					}, 500);
				} else {
					this.shouldRender = !this.shouldRender;
				}


				// 触发自定义事件，并将 isDropDownOpen 作为参数传递
			},
			nextSlide() {
				if (this.currentIndex < this.memberLevelInfo.length - 1) {
					this.currentIndex++;
				}
			},
			handleTouchStart(event) {
				event.stopPropagation();
				this.startTouchX = event.touches[0].clientX;
			},
			handleTouchEnd(event) {
				event.stopPropagation();
				this.endTouchX = event.changedTouches[0].clientX;
				if (this.startTouchX - this.endTouchX > 50) {
					// 左滑动
					this.nextSlide();
				} else if (this.startTouchX - this.endTouchX < -50) {
					// 右滑动
					if (this.currentIndex > 0) {
						this.currentIndex--;
					}
				}
			},
			toMemberGrowth() {
				// 方法功能待实现，比如跳转到会员成长页面等
			},
			handleShowExp() {
				this.$emit("memberExp", true)
			}
		},
	};
</script>

<style lang="less" scoped>
	.NotoSansSC {
		font-family: NotoSansSC-Medium;
		font-style: normal;
		font-weight: 400;
		font-size: 24rpx;
		line-height: 40rpx;
		height: 40rpx;
		color: rgba(0, 0, 0, 0.54);
    margin-top: 8rpx;
	}

	.NotoSansSC_Regular {
		font-family: NotoSansSC-Regular;
	}

	.NotoSansSC_Medium {
		font-family: NotoSansSC-Medium,
	}

	.grade {
		font-family: FrankNew-Medium;
		display: flex;
		justify-content: space-between;
	}

	.number {
		color: #a21215;
		font-size: 36rpx;
		display: flex;
		font-family: FrankNew-Medium;
		font-weight: 500;
    line-height: 52rpx;
	}

	.number-right {
		font-family: "FrankNew-Regular";
		font-style: normal;
		font-weight: 400;
		font-size: 24rpx;
		font-style: normal;
		line-height: 60rpx;
		text-align: center;
		width: 160rpx;
		height: 60rpx;
		border-radius: 30rpx 0rpx 60rpx 30rpx;
		position: relative;
	}

	.text-underline0::after {
		content: "";
		position: absolute;
		left: 31rpx;
		bottom: 10rpx;
		width: 102rpx;
		height: 1px;
		background-color: #000000;
	}

	.text-underline1::after {
		content: "";
		position: absolute;
		left: 31rpx;
		bottom: 10rpx;
		width: 102rpx;
		height: 1px;
		background-color: #ffffff;
	}

	.text-underline2::after {
		content: "";
		position: absolute;
		left: 31rpx;
		bottom: 10rpx;
		width: 100rpx;
		height: 1px;
		background-color: #ffc859;
	}

	.drop-down {
		font-family: FrankNew-Medium,NotoSansSC-Medium;
	}

	.drop-down-main {
		z-index: -1;
	}

	.drop-down-bordedr {
		width: 654rpx;
		height: 494rpx;
		border: 1px solid #e8e8e8d4;
		position: absolute;
		top: 60rpx;
		border-top: none;
		left: 0;
		border-radius: 0 0 40rpx 40rpx;
		background-color: #fff;
		z-index: -99;
	}

  .drop-down-box{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-size: 24rpx;
    height: 40rpx;
    line-height: 40rpx;
    margin-top: 2px;
  }

	.drop_text1 {
		color: rgba(0, 0, 0, 0.54);
	}

	.drop_text2 {
		color: rgba(255, 255, 255, 0.78);
	}

	.downdrop_box {
		position: absolute;
		width: 654rpx;
		height: 246rpx;
		left: 0rpx;
		top: 384rpx;
		display: flex;
		justify-content: space-between;
    padding: 32rpx 40rpx;

		.item {
			width: 96rpx;
			height: 112rpx;
			// margin: 40rpx 0rpx 40rpx 32rpx;

			img {
				width: 64rpx;
				height: 64rpx;
			}

			display: flex;
			flex-direction: column;
			align-items: center;
		}
	}

	.progress {
		width: 100%;
		height: 4rpx;
		margin-top: 20rpx;
		background: rgb(215, 209, 195, 0.3)
	}

	.member {
		background-size: 100% 100%;
		border-radius: 20rpx;
		background-size: cover;
		background-repeat: no-repeat;
	}

	.progress-bar {
		background: black;
		height: 4rpx;
	}

	.exp {
		display: flex;
		justify-content: space-between;
	}

	.swiper-wrapper {
		display: flex;
		transition: transform 0.3s ease-in-out;
	}

	.swiper-slide {
		flex-shrink: 0;
		position: relative;
		background-repeat: no-repeat !important;
		background-size: cover !important;
		border-radius: 32rpx;
	}

	.member-card {
		height: 384rpx;
		// margin: 0 28rpx 0;
		margin: 0 48rpx;
	}

	.animate-drop-down {
		animation: slideDown 0.6s ease-out forwards;
	}

	@keyframes slideDown {
		0% {
			transform: translateY(-45rpx);
			opacity: 0;
		}

		10% {
			transform: translateY(-35rpx);
			opacity: 0;
		}

		100% {
			transform: translateY(0);
			opacity: 1;
		}
	}

	.animate-drop-up {
		animation: slideUp 0.6s ease-out forwards;
	}

	@keyframes slideUp {
		0% {
			transform: translateY(0);
			opacity: 1;
		}

		100% {
			transform: translateY(-45rpx);
			opacity: 0;
		}
	}

	.card_inner_box {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: 384rpx;
		width: 100%;
		padding: 40rpx;
	}

	.member_level {
		font-family: FrankNew-Medium;
		margin-right: 12rpx;
	}

	.down_drop_view {
		width: 9px;
		height: 5px;
		position: relative;
		top: -3px;
		left: 3px;
	}

	.down_drop_arrow {
		width: 40rpx;
		height: 40rpx;
    transform: rotateX(0);
	}

  .arrow_rotate{
    transform: rotateX(180deg);
  }

	.curr_exp {
		font-size: 28rpx;
		font-family: FrankNew-Regular,NotoSansSC-Regular;
    margin-right: 2px;
	}

	.tag_exp {
		font-size: 24rpx;
		font-family: FrankNew-Regular,NotoSansSC-Regular;
	}

	.exp_icon {
		width: 20rpx;
		height: 20rpx;
		margin-left: 4px;
	}

	.exp_left {}
</style>
